<template>
  <Cdialog
    :visible.sync="dialog.visible"
    title="聊天对话框"
    width="800px"
    :modal="false"
    class="ChatDialog"
    @handleClose="handleClose"
  >
    <div class="ChatDialog-content">
      <ChatMenu ref="ChatMenu" :default-active.sync="defaultActive" :default-chat.sync="defaultChat" class="ChatDialog-content-chatMenu" />
      <ChatContent :default-active.sync="defaultActive" :default-chat.sync="defaultChat" class="ChatDialog-content-chatContent" @updateMenu="updateMenu" />
    </div>
  </Cdialog>
</template>
<script>
import ChatMenu from './components/chatMenu'
import ChatContent from './components/chatContent'
export default {
  components: { ChatMenu, ChatContent },
  data() {
    return {
      defaultActive: '', // 当前激活菜单的 index（聊天组id）
      defaultChat: {}, // 当前聊天组信息
      dialog: {
        visible: false
      }
    }
  },
  methods: {
    // 更新聊天组
    updateMenu() {
      this.$refs.ChatMenu.getList()
    },
    // 打开对话框
    openDialog() {
      this.dialog.visible = true
    },
    // 关闭对话框
    handleClose() {
      this.dialog = {
        visible: false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.ChatDialog{
  &-content{
    width: 100%;
    height: 100%;
    display: flex;
    min-height: 500px;
    &-chatMenu{
      width: 240px;
    }
    &-chatContent{
      width: calc(100% - 240px);
      height: 100%;
    }
  }
}
</style>
